<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>9-交通大学案例</title>
		<style type="text/css">
			/*去除标签默认的内外间距*/
			*{
				margin:0;
				padding:0;
			}
			/*去除默认a的下划线*/
			a{
				text-decoration: none;
			}
			body{
				line-height:1;
			}
			.box{
				width:978px;
				height:198px;
				border:1px solid red;
				/*距离body顶部30px,居中*/
				margin:30px auto;
				/*内边距上右下左*/
				padding:27px 29px 0px 29px;
				/* 不希望改变盒子本来的宽和高 */
				box-sizing: border-box;
			}
			/* 导航 */
			.box .nav{
				border-bottom:1px solid #b3b3b3;
				/* 父类元素中有浮动元素，导致父类无适应的高度... */
				overflow:hidden;
			}
			.box .nav .news{
				font-size:18px;
				color:#b22c25;
				font-weight:700;
				padding-bottom:14px;
				border-bottom:3px solid #b22c25;
				/* 向左边浮动 */
				float:left;
			}
			.box .nav .location{
				color:#888888;
				font-size:12px;
				/*向右浮动*/
				float:right;
			}
			.box .nav .location a{
				color:#888888;
				font-size:12px;
			}
			/* 导航end */
			.title{
				font-size:24px;
				color: #000000;
				font-weight:700;
				text-align:center;
				margin-top:41px;
				padding-bottom:13px;
				border-bottom:1px dashed #cccccc;
			}
			.datetime{
				padding-bottom:13px;
				border-bottom:1px dashed #cccccc;
				text-align: center;
				margin-top:18px;
			}
			.datetime span{
				color:#666666;
				font-size:11px;
				margin-right:36px;
			}
			.datetime span:last-child{
				margin-right:0;
			}
		</style>
	</head>
	<body>
		<!-- 最外层 -->
		<div class="box">
			<!-- nav -->
			<div class="nav">
				<span class="news">主页新闻</span>
				<span class="location">
					<a href="#">当前位置：</a>
					<a href="#">新闻网首页</a>>
					<a href="#">主页新闻</a>>
					<a href="#">正文</a>
				</span>
			</div>
			<!-- nav_end -->
			<!-- title -->
			<div class="title">
				【陕西高教】燕连福：抓好三个“融入”推动研究生思政教育高质量发展
			</div>
			<!-- title_end -->
			<!-- time -->
			<div class="datetime">
				<span>来源：陕西高教</span><span>日期：2022-03-18 11:25</span><span>浏览量：489</span>
			</div>
			<!-- time_end -->
		</div>
		<!-- 最外层end -->
	</body>
</html>
